<template>
  <div id="picture-edit-batch-modal">
    <div>
      <a-modal v-model:open="open" title="批量修改图片" :footer="false" @cancel="closeModal" @closed="closeModal">
        <div class="content" style="text-align: center">
          <a-form
            :model="formState"
            layout="vertical"
            name="normal_submit"
            class="login-form"
            @finish="submitForm"
          >
            <a-form-item
              name="nameRule"
              label="名称"
            >
              <a-input v-model:value="formState.nameRule" placeholder="请输入命名规则, {序号}" />
            </a-form-item>

            <a-form-item
              name="introduction"
              label="简介"
            >
              <a-textarea
                v-model:value="formState.introduction"
                :autoSize="{ minRows: 2, maxRows: 5 }"
                placeholder="请输入简介"
              >
              </a-textarea>
            </a-form-item>

            <!--            标签-->
            <CategoryTagsForm v-model="formState" />

            <a-form-item>
              <a-button
                block
                :loading="loading"
                type="primary"
                html-type="submit"
              >
                提交
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import CategoryTagsForm from '@/components/CategoryTagsForm.vue'
import { editPictureByBatchUsingPost } from '@/api/pictureController.ts'
import { useRouter } from 'vue-router'

const router = useRouter()
const open = defineModel()

interface Props {
  pictureIds: number[]
  onSuccess?: () => void
  spaceId?: number
}

const formState = ref<API.PictureEditBatchRequest>({})

const props = withDefaults(defineProps<Props>(), {
  onSuccess: () => {},
})

const openModal = () => {
  open.value = true
}

const closeModal = () => {
  open.value = false
  formState.value = {
    nameRule: '',
    introduction: '',
    tags: [],
    category: ''
  }
}

// 暴露方法
defineExpose({
  openModal,
})

// 提交表单
const loading = ref(false)
const submitForm = async (values) => {
  loading.value = true
  console.log('Success:', values)
  const res = await editPictureByBatchUsingPost({
    ...values,
    spaceId: props.spaceId,
    idList: props.pictureIds,
  })
  if (res.data.code == 0 && res.data.data) {
    await props?.onSuccess()
    closeModal()
  }
  loading.value = false
}
</script>
